import { Tabs } from 'expo-router';
import { Platform, StyleSheet } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          // ios: {
          //   // Use a transparent background on iOS to show the blur effect
          //   position: 'absolute',
          // },
          default: {},
        }),
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: '每日',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="demo"
        options={{
          title: '测试',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="area-chart" color={color} />,
        }}
      />
      <Tabs.Screen
        name="middle"
        options={{
          title: '',
          tabBarIcon: ({ color }) => <IconSymbol size={16} style={styles.middleButton} name="add" color={color} />,
        }}
      />
      <Tabs.Screen
        name="knowladge"
        options={{
          title: '知识库',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="menu-book" color={color} />,
        }}
      />
      <Tabs.Screen
        name="personal"
        options={{
          title: '个人',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="person" color={color} />,
        }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  middleButton:{
    backgroundColor: '#D8D8D8', borderRadius: 50, transform: [{translateY: -14}, {scale: 4}]
  }
})